<script>
export default {
  name: "ChildNavBar",
  props:{
    beforePath:{
      type:String,
      default:'/staging'
    },
    title:{
      type:String,
      default:'标题'
    },
    queryParams:{
      type:Object,
      default: ()=>{
        return{
          queryInput: undefined,
          queryItems:[]
        }
      }
    },
    placeholder:{
      type:String,
      default:'请输入搜索关键词'
    },
    customLabel:{
      type:Boolean,
      default:false
    },
    dialogTitle:{
      type:String,
      default:'条件查询'
    }
  },
  data(){
    return{
      dialogVisible:false,
      nowList:[],
      hotList:[
        {value:'qeqweaa'},
        {value:'aeqw'},
        {value:'q3113'},
        {value:'xadsd'},
      ],
    }
  },
  created() {
    this.nowList = this.$nowList
  },
  methods:{
    onSearch(){

      this.handleNowList( this.queryParams.queryInput )

      this.$emit('handleQuery', this.queryParams )

      this.dialogVisible = false
    },
    handleTagHot( item ){

      this.queryParams.queryInput = item.value

      this.onSearch()
    },
    handleTagClose( index , name ){
      let that = this

      that[ name ][ index ].show = false
    },
    handleTagSave( item ){

      let value = item.value

      this.handleNowList( value )

      this.queryParams.queryInput = value

    },
    handleNowList( value ){

      if( value ){
        const da = this.nowList.find( v =>{
          return value === v.value
        })

        if( da ){

          let index

          this.nowList.forEach( ( v,i) =>{
            if( value === v.value ){
              index = i
              return
            }
          })

          this.nowList.splice( index , 1 )

          this.nowList.unshift({
            value:value,
            show:true
          })
        }
        else{
          this.nowList.push({
            value:value,
            show:true
          })
        }
      }
    },
    handleCell( index, childValue  ){

      let key = this.queryParams.queryItems[index].value

      this.queryParams[ key ] = this.queryParams[ key ] === childValue ? undefined : childValue
    },
    back(){
      this.$router.push( this.beforePath )
    },
  },
  beforeDestroy() {
    this.$nowList = this.nowList
  }
}
</script>

<template>
  <div>
    <van-nav-bar :title="title" left-text="返回" left-arrow
                 @click-left="back"
                 @click-right="dialogVisible = true"
    >
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>

    <van-popup v-model="dialogVisible" position="right" :style="{ width: '100%' ,height: '100%' }" >
      <div v-if="!customLabel">
        <div class="popup-title">
          <van-icon name="arrow-left" style="margin-left: 10px" size="20" @click="dialogVisible = false "/>
          <van-search v-model="queryParams.queryInput"
                      :placeholder="placeholder"
                      show-action style="width: 100%"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>
        <div v-if="nowList.length > 0">
          <p>最近搜索</p>
          <van-tag v-if="item.show" size="large" closeable plain type="primary"
                   @close="handleTagClose( index , 'nowList')"
                   v-for="(item,index) in nowList"
                   class="tag-item"
                   :key="index"
                   @click="handleTagSave(item)"
          >{{item.value}}</van-tag>
        </div>
        <p>热门搜索</p>
        <van-tag size="large" plain type="primary"
                 v-for="(item,index) in hotList"
                 class="tag-item"
                 :key="index"
                 @click="handleTagHot( item )"
        >{{item.value}}</van-tag>
        <van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', }"></van-divider>
      </div>
      <div v-else>
        <van-nav-bar :title="dialogTitle" left-text="返回" left-arrow
                     @click-left="dialogVisible = false"
        >
          <template #right>
            <div @click="onSearch" style="color: white">搜索</div>
          </template>
        </van-nav-bar>
      </div>
      <div v-for="( item , index ) in queryParams.queryItems">
        <p>{{item.label}}</p>
        <van-cell-group inset>
          <van-cell :title="child.label" v-for="child in item.children "
                    class="cell-border"
                    :key="item.value + child.value "
                    @click="handleCell( index , child.value )"
          >
            <template #right-icon>
              <van-icon v-if="queryParams[ item.value ] === child.value " name="success"  color="#1989fa" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <slot></slot>
    </van-popup>
  </div>
</template>

<style scoped lang="scss">

.tag-item{
  margin-left: 12px;
  margin-bottom: 8px;
}
.cell-border{
  border-bottom: #97a8be 1px solid;
}
.cell-border:last-child{
  border-bottom: none;
}

.popup-title{
  display: flex;width: 100%;justify-content: space-between;align-items: center;
}
</style>
